<template>
	<div class="login" :class="fontFamily">
		<div class="login-top">
			友情提示: 1. 此平台为免费使用; 2. 为保障使用流畅性, 推荐谷歌(Chrome)浏览器！
		</div>
		<div class="login-center">
			<el-carousel height="500px">
			    <el-carousel-item>
					<div class="lz-warp-bg">
						<img src="../../../static/images/bg1.jpg" class="bg-image"/>
					</div>
				</el-carousel-item>
				<el-carousel-item>
					<div class="lz-warp-bg lz-warp-bg2">
						<img src="../../../static/images/bg2.jpg" class="bg-image"/>
					</div>
				</el-carousel-item>
			</el-carousel>
		</div>
		<div class="login-center2">
			<div class="c-center">
				<div class="login-warp desktop">
					<div class="Subtitle">
						<i class="iconfont icon-xiuxiri"></i>
						供应链管理平台</div>
					<el-form :model="ruleForm" :rules="rules" ref="ruleForm" class="demo-ruleForm">
						<el-form-item prop="username">
							<el-input prefix-icon="el-icon-user" v-model="ruleForm.username"  :size="size" placeholder="请输入登录名"></el-input>
						</el-form-item>
						<el-form-item prop="password">
							<el-input :type="passwordType" prefix-icon="el-icon-lock" v-model="ruleForm.password" :size="size" placeholder="请输入密码">
								<i class="lz-icon" :class="passwordType=='password' ? 'el-icon-turn-off':'el-icon-open'" slot="suffix" @click="handleIconClick"></i>
							</el-input>
						</el-form-item>
						<el-form-item>
							<div class="login-btn">
								<el-checkbox v-model="rememberName" :checked="ruleForm.username?true:false">记住用户名</el-checkbox>
								<div class="login-right">
									<el-button type="primary" @click="submitForm()" :size="size" style="width: 100%;">登录</el-button>
								</div>
							</div>
						</el-form-item>
						<el-form-item>
							有效期：2022-02-28
						</el-form-item>
					</el-form>
				</div>
			</div>
		</div>
		
		<div class="login-bottom">
			<div class="bt-center">
				<el-row :gutter="16">
					<el-col :span="16">
						<div class="grid-content " ></div>
					</el-col>
					<el-col :span="8" >
						<div class="grid-content "></div>
					</el-col>
				</el-row>
				<el-row :gutter="16" style="margin-top: 50px;">
					<el-col :span="12">
						<div class="grid-content " ></div>
					</el-col>
					<el-col :span="12" >
						<div class="grid-content "></div>
					</el-col>
				</el-row>
			</div>
		</div>
		
		<div class="login-footer">
			
		</div>
		
	</div>
</template>

<script>
	const {
		body
	} = document
	const WIDTH = 992
	let that
	import {
		mapGetters,mapActions
	} from 'vuex'
	export default {
		computed: {
			...mapGetters(['size', 'fontFamily', 'api','token'])
		},
		name: "login",
		data() {
			return {
				device: 'desktop', //当前为pc
				passwordType: 'password', //是否显示密码
				rememberName:false,//是否记住用户名
				ruleForm: {
					username: localStorage.getItem('rememberUserName')||'', //登录名
					password: '', //密码
				},
				rules: {
					username: {
						required: true,
						message: '请输入登录名',
						trigger: 'blur'
					},
					password: {
						required: true,
						message: '请输入密码',
						trigger: 'blur'
					}
				}
			}
		},
		mounted() {
			that=this
			this.$_resizeHandler()
			window.addEventListener('resize', this.$_resizeHandler)
		},
		methods: {
			...mapActions('user',['set_Login_info']),
			...mapActions('permission',['generateRoutes']),
			handleIconClick() {
				if (this.passwordType == 'password') {
					this.passwordType = 'text'
				} else {
					this.passwordType = 'password'
				}
			},
			//登录提交
			submitForm() {
				//是否记住用户名
				if(this.rememberName){
					localStorage.setItem('rememberUserName',that.ruleForm.username)
				}else{
					localStorage.setItem('rememberUserName','')
				}
				this.$refs.ruleForm.validate((valid) => {
					if (valid) {
						let req = {
							...that.ruleForm
						}
						this.GLOBAL.doPost(this.api.GLOBAL_sys_login, req).then(res => {
							if(res.code==200){
								that.set_Login_info(res.result)
								// that.$router.push({name:'Home',path:'/Home'})
								//获取菜单权限
								that.getMenuList()
							}
						})
					} else {
						return false;
					}
				});
			},
			//获取菜单权限
			getMenuList(){
				this.GLOBAL.doGet(this.api.GLOBAL_sys_permission_queryMenuList, {token:that.token}).then(res => {
					if(res.code==200){
						that.generateRoutes(res.result)
						that.$router.push({name:'Home',path:'/Home'})
					}
				})
			},
			$_isMobile() {
				const rect = body.getBoundingClientRect()
				return rect.width - 1 < WIDTH
			},
			$_resizeHandler() {
				if (!document.hidden) {
					const isMobile = this.$_isMobile()
					if (isMobile) {
						this.device = 'mobile'
					} else {
						this.device = 'desktop'
						
					}
				}
			}
		}
	}
</script>

<style scoped="scoped" lang="scss">
	@import './login.scss';
</style>
